import {useQueryLoader, usePreloadedQuery} from 'react-relay/hooks';
//import graphql from 'babel-plugin-relay/macro';
import React from 'react';

import IspCurrent from "./IspCurrent";
const graphql = require("babel-plugin-relay/macro");
const TestQuery3 = require('./__generated__/RemodQuery.graphql');
const TestRootIssuesQuery2 = require('./__generated__/RemodQuery.graphql');

const { Suspense } = React;

interface Props {
    prepared: {
        //若是路由配置多个loadQuery提前加载，那么graphql也是分开的请求包,要独立为多次发送后端的。
       // issuesQuery: PreloadedQuery<TestRootIssuesQuery.TestRootIssuesQuery>;
       // testQuery9: PreloadedQuery<TestRootIssuesQuery.TestRootIssuesQuery>;
    }
}

export default function Test(props: Props) {
    //第二个返回值loadQuery是回调(variables: VariablesOf<TQuery>, options?: UseQueryLoaderLoadQueryOptions) => void
    //第二个参数的类型必须完全一致！useQueryLoader与usePreloadedQuery保持一致类型？？

    const [queryReference, loadQuery] = useQueryLoader(
        TestQuery3  //GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
          //PreloadedQuery<TQuery> | null,  provided by router
    );
    //第二个参数的： props.prepared.issuesQuery,
        //props.prepared父辈的已经做查询传递，还没给参数呢
    console.log("Test 目前render之后.New=",queryReference,"Old.parent=",props.prepared);
    //引入Relay思路大变：没有数据就没有页面展示，若需默认展示就必须提供缺省参数来准备好数据后才能执行页面显示代码。
    return (
      <>
          <p>Remod嵌套路由层次的页面useQueryLoader</p>
            <button
                onClick={() => loadQuery({
                    id: '4',
                    repId: '3192'
                })}
            >
             动态发起的loadQuery请求！
            </button>
            <Suspense fallback="Loading...">
                {queryReference != null
                    ? <NameDisplay queryReference={queryReference} />
                    : null
                }
            </Suspense>
          <p>Remod嵌套路由层次的页面useQueryLoader</p>
    </>
    );
}

/* **
queryReference: PreloadedQuery<TestRootIssuesQuery.TestRootIssuesQuery>;
* */
interface NameDisplayProps {
    queryReference: any;
}
//从服务端取得的每个实体模型id都不允许相等的！Relay报错; $globalId = base64("$ObjectName:$ObjectPK").
function NameDisplay({ queryReference }:NameDisplayProps)
{
    //const data = usePreloadedQuery<TestQuery>(TestQuery, queryReference);
    //graphql``语法体usePreloadedQuery定义多个query；报错！BabelPluginRelay: Expected exactly one definition per graphql tag.
    //const { node: issue } = usePreloadedQuery(
    //子组件的@refetchable(queryName: "CommentEnabledRefetchQuery")依据这个来查！variables: {isUsing: 369, id: "1520288"}
    const data = usePreloadedQuery<typeof TestRootIssuesQuery2>(
        graphql`
            query RemodQuery($id: ID!,$repId: ID!) {
                getDeviceSelf(id: $id) {
                    id oid cod
                }
                getReport(id: $repId) {
                    id  no stm{id due}
                    ...IspCurrent
                }
            }
        `,
        queryReference,
    );
    const { getDeviceSelf, getReport}=data;
    console.log("NameDisplay 目前data=",data);

    return (
        <div>
            <p>Remod嵌套路由层次的页面usePreloadedQuery</p>
            <h1>{getDeviceSelf?.id}= {getDeviceSelf?.cod} on ReMOD: {getDeviceSelf?.oid}:: {getReport?.upLoadDate}</h1>
            <IspCurrent issue={getReport} />
        </div>
        );
}

//ID一样的:报错RelayResponseNormalizer: Invalid record `1`. Expected __typename to be consistent, but the record was assigned conflicting types `User` and `Division`. The GraphQL server likely violated the globally unique id requirement by returning the same id for different objects.
